import React from "react"
import { IoBookOutline, IoHomeOutline, IoPersonOutline } from "react-icons/io5"

interface NavigationProps {
  onMenuClick: () => void
}

const Navigation: React.FC<NavigationProps> = ({ onMenuClick }) => {
  return (
    <header className="h-16 flex items-center justify-between mx-24 px-2 select-none">
      {/* 左侧导航区 */}
      <div className="flex items-center gap-6">
        <div className="flex items-center gap-2">
          <IoBookOutline className="h-6 w-6 text-gray-700" />
          <span className="text-lg font-semibold text-gray-800 select-all">
            Java并发编程之美
          </span>
        </div>
      </div>

      {/* 右侧功能区 */}
      <div className="flex items-center gap-4">
        {/* 首页链接 */}
        <a
          href="/"
          className="flex items-center gap-1 text-gray-600 hover:text-blue-600"
        >
          <IoHomeOutline className="h-5 w-5" />
          <span>首页</span>
        </a>

        {/* 我的书架 */}
        <a
          href="/bookshelf"
          className="flex items-center gap-1 text-gray-600 hover:text-blue-600"
        >
          <IoBookOutline className="h-5 w-5" />
          <span>我的书架</span>
        </a>

        {/* 用户头像 */}
        <div className="relative">
          <button
            aria-label="打开用户菜单"
            className="flex items-center justify-center h-8 w-8 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors"
            onClick={onMenuClick}
          >
            <IoPersonOutline className="h-5 w-5 text-gray-600" />
          </button>

          {/* 消息通知徽章 */}
          <div className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full h-5 w-5 flex items-center justify-center overflow-hidden">
            <span className="text-xs">3</span>
          </div>
        </div>
      </div>
    </header>
  )
}

export default Navigation
